<template>
  <view class="user-section">
    <view class="user-info-box" @click.stop="handleUser">
      <view class="user-avtor">
        <image
          :src="
            myInfo.user_info.avatar_url ||
            'https://chidian.chixiaodian.com/web/uploads/images/store_1/2021-10-21/43fc7d0b3d9c42930e790495c58fb83300149aa5.png'
          "
          v-if="myInfo.user_info"
        />
        <image
          :src="'https://chidian.chixiaodian.com/web/uploads/images/store_1/2021-10-21/43fc7d0b3d9c42930e790495c58fb83300149aa5.png'"
          v-else
        />
      </view>
      <view class="user-info">
        <view class="user-name">
          <text :style="{ color: fontColor }" v-if="myInfo.user_info">{{
            myInfo.user_info.nickname || $t("diy.login")
          }}</text>
          <text :style="{ color: fontColor }" v-else>{{
            $t("diy.login")
          }}</text>
          <!-- <image
            src="https://chidian.chixiaodian.com/web/uploads/images/store_1/2021-10-21/9741a6cec026f1db41c9c6c7c9e761b7c6c7c3c5.png"
            alt=""
          /> -->
        </view>

        <view class="menber-badges" v-if="shenheStatus != 1">
          <view
            class="menber-badges-item"
            @click.stop="$utils.toUrl('/user/member/member_center', 'navigate')"
          >
            <text :style="{ color: fontColor }" v-if="myInfo.user_info">{{
              myInfo.user_info.level_name || $t("member.ordinary")
            }}</text>
            <text :style="{ color: fontColor }" v-else>{{
              $t("member.ordinary")
            }}</text>
            <i
              class="iconfont icon-arrow-right"
              :style="{ color: fontColor }"
            ></i>
          </view>
          <!-- #ifndef APP-PLUS -->
          <view class="menber-badges-item">
            <text :style="{ color: fontColor }">{{ $t("diy.real") }}</text>
            <i
              class="iconfont icon-arrow-right"
              :style="{ color: fontColor }"
            ></i>
          </view>
          <!-- #endif -->
        </view>
      </view>
    </view>
    <view class="user-set" @click.stop="handleUser">
      <i class="iconfont icon-set" :style="{ color: fontColor }"></i>
    </view>
    <view
      v-if="shenheStatus != 1 && propsData.params.showMemberCode"
      class="member-code"
      @click.stop="gotoMember"
    >
      <i class="iconfont icon-QRcode" :style="{ color: fontColor }"></i>
      <view class="code-text">
        <span :style="{ color: fontColor }">{{ $t("diy.code") }}</span>
      </view>
    </view>
    <template v-if="shenheStatus != 1">
      <!-- #ifndef APP-PLUS -->
      <view class="member-tabs">
        <view
          class="tab-item"
          @click="$utils.toUrl('/user/collection/collection?type=1')"
        >
          <view class="tab-badge-num" :style="{ color: fontColor }">{{
            myInfo.favorite_goods_num || 0
          }}</view>
          <view class="tab-text" :style="{ color: fontColor }">{{
            $t("diy.collect1")
          }}</view>
        </view>
        <!-- <view
          class="tab-item"
          @click="$utils.toUrl('/user/collection/collection?type=1')"
        >
          <view class="tab-badge-num" :style="{ color: fontColor }">0</view>
          <view class="tab-text" :style="{ color: fontColor }">{{
            $t('diy.collect2')
          }}</view>
        </view> -->
        <view
          class="tab-item"
          @click="$utils.toUrl('/user/my_coupon/my_coupon')"
        >
          <view class="tab-badge-num" :style="{ color: fontColor }">{{
            myInfo.coupon_num || 0
          }}</view>
          <view class="tab-text" :style="{ color: fontColor }">{{
            $t("common.coupon")
          }}</view>
        </view>
        <view class="tab-item" @click="$utils.toUrl('/user/history/history')">
          <view class="tab-badge-num" :style="{ color: fontColor }">{{
            myInfo.browse_log_num || 0
          }}</view>
          <view class="tab-text" :style="{ color: fontColor }">{{
            $t("diy.foot")
          }}</view>
        </view>
      </view>
      <!-- #endif -->
      <!-- #ifdef APP-PLUS -->
      <view style="width: 100%; height: 50rpx"></view>
      <!-- #endif -->
      <memberCardTem :propsData="propsData"></memberCardTem>
      <!--  -->
      <memberTabGroup :propsData="propsData"></memberTabGroup>
    </template>
  </view>
</template>

<script>
import memberCardTem from "../components/memberCard/index.vue";
import memberTabGroup from "../components/memberTabGroup/index.vue";

export default {
  props: {
    propsData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    userInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
    myInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  components: {
    memberCardTem,
    memberTabGroup,
  },
  watch: {},
  data() {
    return {};
  },
  computed: {
    styleType() {
      return this.propsData.params.styleType;
    },
    fontColor() {
      return this.propsData.params.fontColor || "";
    },
  },
  methods: {
    handleUser() {
      if (this.$utils.isLogin(false)) {
        this.$utils.toUrl("/user/my/setting", "navigate");
      } else {
        this.$utils.toUrl("/login/login/login_page");
      }
    },
    gotoMember() {
      if (this.$utils.isLogin(false)) {
        this.$utils.toUrl("/md_admin/member/member", "navigate");
      } else {
        this.$utils.toUrl("/login/login/login_page");
      }
    },
  },
  filters: {},
  mounted() {},
};
</script>

<style scoped lang="scss">
.user-section {
  width: 100%;
  padding-top: 2.67vw;
  position: relative;
  .user-info-box {
    width: 100%;
    position: relative;
    display: flex;
    padding: 0 4.8vw;
    .user-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: 3.73vw;
    }
  }
  .user-avtor {
    width: 13.34vw;
    height: 13.34vw;
    background: #f7f2f4;
    border: 2px solid #ffffff;
    border-radius: 50%;
    overflow: hidden;
    image {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  .user-name {
    display: flex;
    align-items: center;
    text {
      font-size: 4.53vw;
      font-family: PingFang SC;
      font-weight: 600;
      color: rgba(255, 255, 255, 1);
    }
    image {
      width: 3.73vw;
      height: 3.73vw;
      border-radius: 1.067vw;
      margin-left: 2.134vw;
      display: block;
    }
  }
  .user-set {
    width: 5.34vw;
    height: 5.34vw;
    position: absolute;
    right: 4.8vw;
    top: 5.34vw;
    z-index: 11;
    image {
      display: block;
      width: 100%;
      height: 100%;
    }
    .iconfont {
      font-size: 6vw;
    }
  }
  .member-code {
    position: absolute;
    right: 13.73vw;
    top: 5.54vw;
    z-index: 11;
    display: flex;
    flex-direction: column;
    align-items: center;

    .iconfont {
      color: #ffffff;
      font-size: 6vw;
    }
    .code-text {
      height: 4vw;
      padding: 0 1.6vw;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.8);
      position: relative;
      // top: -7px;
      span {
        // transform: scale(0.75);
      }
    }
  }
  .menber-badges {
    display: flex;
    align-items: center;
    margin-top: 2.134vw;
    .menber-badges-item {
      height: 4vw;
      background: rgba(0, 0, 0, 0.2);
      padding: 0 1.34vw;
      display: flex;
      align-items: center;
      border-radius: 2vw;
      padding-right: 3.2vw;
      position: relative;
      text {
        font-size: 3.2vw;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 15px;
        transform: scale(0.8);
      }
      .iconfont {
        line-height: 4.26vw;
        position: absolute;
        right: 2.06vw;
        color: #ffffff;
        top: 0;
        font-size: 19rpx;
      }
    }
    .menber-badges-item:first-child {
      margin-right: 2.13vw;
    }
  }
  .member-tabs {
    width: 94.67%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3.467vw auto;
    .tab-item {
      // width: 25%;
      flex: 1;
      height: 11.73vw;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      .tab-badge-num {
        font-size: 4.267vw;
        font-family: PingFang SC;
        font-weight: 600;
        color: rgba(255, 255, 255, 1);
      }
      .tab-text {
        font-size: 3.2vw;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
      }
    }
  }
}
</style>
